<template>
    <div class="order-detail">
        <van-nav-bar title="确认订单" left-arrow @click-left="backUp"></van-nav-bar>
        <section class="contact">
            <van-icon name="location"></van-icon>
            <div class="contact-info">
                <div v-if="address&&address.length!=0" @click="goto('useraddress')">
                    <p>
                        <span class="contact-name">{{address.user_name}}</span>
                        <span class="contact-tel">{{address.phone}}</span>
                    </p>
                    <p class="contact-address">{{address.address}}</p>
                </div>
                <div v-if="address.length==0" @click="goto('addressadd')">
                    <p>
                        <span class="contact-name">请添加地址</span>
                    </p>
                </div>
            </div>
        </section>
        <div class="cart-goods" v-for="item in cartList" :key="item.goods_id">
            <div class="cart-goods-item">
                <div class="pd-images">
                    <img :src="item.goods_cover" alt/>
                </div>
                <div class="pd-info">
                    <div class="pd-title">{{item.goods_name}}</div>
                    <div class="pd-sku">
                        <p class="sku-info">{{item.goods_attr}}</p>
                    </div>
                    <div class="pd-price">
                        <div class="total">
                            <span>&yen;</span>
                            {{item.goods_price}}
                        </div>
                        <span class="num">×{{item.goods_num}}</span>
                    </div>
                </div>
            </div>
        </div>
        <div class="order-fee">
            <p>商品总额</p>
            <span>￥{{totalFee}}</span>
        </div>
        <van-submit-bar :price="totalFee*100" button-text="提交订单" @submit="onSubmit"/>
    </div>
</template>
<script>
    import {SubmitBar, Toast} from "vant";
    import api from "@/utils/api";

    export default {
        name: "orderconfirm",
        components: {
            [SubmitBar.name]: SubmitBar,
            [Toast.name]: Toast
        },
        data() {
            return {
                hasAddress: "",
                address: "",
                cartList: [],
                totalFee: 0
            };
        },
        mounted() {
            this.confirm(this.$route.query.buy_type);
            this.weixinConfig();
        },
        methods: {
            // 购物车下单
            confirm(buy_type) {
                console.log(buy_type);
                let params = {};
                if (buy_type == "cart") {
                    params = {
                        token: localStorage.getItem("token"),
                        cart_id: this.$route.query.cart_id
                    };
                } else if (buy_type == "buy") {
                    params = {
                        token: localStorage.getItem("token"),
                        goods_id: this.$route.query.goods_id,
                        spec_value_id: this.$route.query.spec_value_id
                    };
                }
                this.$axios({
                    method: "post",
                    url: api.confirm,
                    data: this.$qs.stringify(params)
                }).then(res => {
                    console.log(res);
                    this.cartList = res.goods;
                    this.totalFee = parseFloat(res.total_price);
                    this.address = res.user_address;
                    this.order_id = res.order_id;
                });
            },
            backUp() {
                this.$router.go(-1);
            },
            goto(name) {
                if (name == "useraddress") {
                    this.$router.push({name: name, query: {type: 1}});
                } else {
                    this.$router.push({name: name});
                }
            },
            onSubmit() {
                this.$axios({
                    method: "post",
                    url: api.submit,
                    data: this.$qs.stringify({
                        token: localStorage.getItem("token"),
                        order_id: this.order_id,
                        shipping_id: this.address.address_id
                    })
                }).then(res => {
                    this.wxPay(res);
                });
                // this.$router.push({ path: "/paytype" });
            },
            weixinConfig() {
                this.$axios(api.wxconfig, {
                    params: {
                        url: encodeURIComponent(location.href.split("#")[0])
                    }
                }).then(data => {
                    console.log(data);
                    wx.config({
                        debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
                        appId: data.appId, // 必填，公众号的唯一标识
                        timestamp: data.timestamp, // 必填，生成签名的时间戳
                        nonceStr: data.nonceStr, // 必填，生成签名的随机串
                        signature: data.signature, // 必填，签名，见附录1
                        jsApiList: [
                            "chooseWXPay",
                            "onMenuShareAppMessage",
                            "onMenuShareTimeline"
                        ]
                    });
                });
            },
            wxPay(data) {
                wx.ready(() => {
                    wx.chooseWXPay({
                        appId: data.appId,
                        timestamp: data.timeStamp, // 支付签名时间戳，注意微信jssdk中的所有使用timestamp字段均为小写。但最新版的支付后台生成签名使用的timeStamp字段名需大写其中的S字符
                        nonceStr: data.nonceStr, // 支付签名随机串，不长于 32 位
                        package: data.package, // 统一支付接口返回的prepay_id参数值，提交格式如：prepay_id=***）
                        signType: data.signType, // 签名方式，默认为'SHA1'，使用新版支付需传入'MD5'
                        paySign: data.paySign, // 支付签名
                        success: res => {
                            Toast("支付成功");
                            sessionStorage.setItem("state", "0");
                            this.$router.push({name: "order", params: {state: "0"}});
                        },
                        cancel: res => {
                            Toast("取消支付");
                            sessionStorage.setItem("state", "1");
                            this.$router.push({name: "order", params: {state: "1"}});
                        },
                        fail: res => {
                            Toast(res);
                        }
                    });
                });
            }
        }
    };
</script>
<style lang="less" scoped>
    @import "~style/common.less";

    .order-detail {
        .flexbox(flex-start, space-between, column, wrap);
        min-height: 100vh;
        background-color: @borderColor;

        .contact {
            margin-bottom: 10px;
            margin-top: 1px;
            position: relative;
            height: 80px;
            padding: 0 15px;
            display: flex;
            align-items: center;
            background-color: #fff;
            z-index: 999 l;

            &::after {
                .underline();
            }

            .van-icon-location {
                color: @secColor;
                .font-dpr(24px);
                margin-right: 15px;
            }

            .contact-info {
                background-color: #fff;
                flex: 1;
                .font-dpr(14px);
                font-weight: 300;
                color: @fontColorP;

                .contact-name {
                    .font-dpr(15px);
                    font-weight: normal;
                    margin-right: 20px;
                    font-weight: 600;
                }

                .contact-address {
                    .font-dpr(12px);
                    .textoverflow();
                }
            }
        }

        .cart-goods-item {
            background-color: #fff;
            // margin-top: 10px;
            // width: 90vw;
            padding: 10px 15px;
            // border: 1px solid #f9f;
            .flexbox(flex-start, center, row, nowrap);
            justify-content: space-between;
            // padding: 5px;
            // border-bottom: 1px solid @borderColor;
            &:last-child {
                border-bottom: none;
            }

            .order-info {
                border: 1px solid red;
                position: relative;
                margin-top: 10px;
                padding: 17px 25px;
                color: @fontColorH3;
                .font-dpr(14px);
                font-weight: normal;
                background-color: #fff;

                &::after {
                    position: absolute;
                    content: "";
                    display: block;
                    width: 3px;
                    height: 14px;
                    left: 15px;
                    top: 21px;
                    background-color: @priColor;
                }

                p {
                    .font-dpr(12px);
                    color: @fontColorP;
                    font-weight: 300;
                    margin-top: 12px;
                }
            }

            .pd-images {
                border: 1px solid @borderColor;
                // border: 1px solid #f0f;

                margin: 0 15px 0 5px;
                flex: 1;
                // max-width: 100px;
                img {
                    width: 90px;
                    height: 60px;
                }
            }

            .pd-info {
                flex: 3;
                // .flexbox(flex-start, space-between, column, wrap);
                -width: 68% !important;
                // flex: initial;
                // border: 1px solid blue;

                .pd-title {
                    position: relative;
                    text-overflow: ellipsis;
                    overflow: hidden;
                    display: -webkit-box;
                    /* autoprefixer: off */
                    -webkit-box-orient: vertical;
                    /* autoprefixer: on */
                    -webkit-line-clamp: 2;

                    max-width: 100%;
                    .font-dpr(12px);
                    color: @fontColorH3;
                }

                .pd-sku {
                    padding: 5px 0;
                    line-height: 1.5;
                    .font-dpr(11px);
                    color: @tipColor;
                }

                .pd-price {
                    margin-top: 10px;

                    .total {
                        .font-dpr(14px);
                        color: @secColor;
                    }

                    .flexbox(space-between, center, row, nowrap);
                    flex: initial;

                    /deep/ .van-stepper {
                        // z-index: 999;
                        .flexbox(space-between, center, row, nowrap);
                        flex: initial;
                        border-radius: 2px;
                        // border: 1px solid #f0f;
                        max-height: 16px;
                        width: 2rem;

                        .van-stepper__minus,
                        .van-stepper__plus {
                            border: none;
                            max-height: 16px;
                            background-color: @bgColor;
                        }

                        .van-stepper__input {
                            border: 1px solid @borderColor;
                            // border: 1px solid #f00;
                            max-height: 16px;
                            background-color: @bgColor;
                            // border: none;
                            outline: none;
                            text-align: center;
                            padding: 0;
                            min-width: 40%;
                            .font-dpr(11px);
                        }

                        .van-stepper__minus--disabled {
                            background-color: @bgColor;
                        }
                    }
                }

                .num {
                    .font-dpr(12px);
                }
            }

            .van-checkbox {
                // border: 1px solid @fontColorH3;
                position: absolute;
                left: 0;
            }
        }

        .order-fee {
            // border: 1px solid red;
            display: flex;
            justify-content: space-between;
            align-items: center;
            background-color: #fff;
            padding: 0 15px;
            .font-dpr(14px);
            line-height: 46px;
            margin: 2px 0;
        }
    }
</style>